<template>
	<view class="container">
		<!-- 蒙版 -->
		<view class="black-bg container">
			<!-- 弹窗 -->
		</view>
		<view class="top-rent-money">
			<view class="rent-pomp-title1">
				选择一
			</view>
			<view class="rent-item-content">
				<view v-for="(item, index) in this.dataList" :key="index"
					:class="selectRentMoneyIndex==index?'rent-money-item-active':'rent-money-item'"
					@click="checkSelectRentMoneyBtn(index)">
					{{item}}
				</view>
			</view>
			<view class="rent-pomp-title1">
				自定义
			</view>
			<view class="rent-money-custom">
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="low" />
				<view>至</view>
				<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number" v-model="high" />
			</view>
			<view class="btn-bottom" style="display: flex;">
				<view class="rent-btn" style="margin-right: 100rpx;" @click="settingArgs(false)">取消</view>
				<view class="rent-btn-sure" @click="settingArgs(true)">确定</view>
			</view>
		</view>
	</view>

</template>
<script>
	import {
		types
	} from 'sass'
	export default {
		name: 'MoneyAreaPopup',
		emits: ['@changeData'],
		props: {
			dataList:{
				types:Array,
				default:[]
			}
		},
		data() {
			return {
				selectItemIndex: null,
				low: null,
				high: null
			}
		},
		methods: {
		
		},
		computed: {

		}

	}
</script>
<style scoped lang="scss">
	@import url(../../static/css/base.css);

	.container {
		/* 蒙版 */

		position: fixed;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 144rpx;
		background: #FFFFFF;

		box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
		background-size: 100%;
		opacity: 1;
		z-index: 2;
		padding: 20rpx 40rpx;
		display: flex;
	}

	.black-bg {
		position: absolute;
		width: 100%;
		height: 1360rpx;
		top: 70rpx;
		background: rgba(0, 0, 0, 0.45);

	}

	.top-rent-money {
		height: 724rpx;
		top: 70rpx;
		position: absolute;
		background: white;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 40rpx;
		padding: 48rpx 32rpx 48rpx 32rpx;

		.checkItem {}

		.rent-item-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
		}

		.rent-money-item {
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-item-active {
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-custom {
			display: flex;
			align-items: baseline;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.low {
			width: 73px;
			height: 36px;
			border-radius: 4px;
			opacity: 1;
			box-sizing: border-box;
			border: 1px solid #333333;
			text-align: center;
		}

		.rent-btn {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}

		.rent-btn-sure {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}
	}
</style>
